<template>
  <div class="sheet" :class="theme">
    <div class="sheet-header" v-if="hasSheetHeader">{{ title }}</div>
    <div class="sheet-body">
      <div
        class="sheet-row"
        v-for="(item, index) in rows"
        :key="'sht-d-' + index"
      >
        <div class="label">{{ item.name }}</div>
        <div class="field" :class="item.textColor">{{ item.value }}</div>
      </div>
    </div>
    <div class="sheet-footer">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      hasSheetHeader: false,
      rows: [],
      useDualTheme: false,
      theme: "night",
    };
  },
  props: {
    title: {
      type: String,
      default: null,
    },
    sheetData: {
      type: Array,
      required: true,
      default: () => new Array(),
    },
  },
  watch: {
    sheetData: {
      handler(n) {
        this.determineTheme();
        this.writeSheet();
      },
      immediate: true,
      deep: true,
    },
    title: {
      handler(n) {
        this.determineTheme();  
        if (n !== null && n !== undefined) {
          this.hasSheetHeader = true;
        }
      },
    },
  },
  methods: {
    writeSheet() {
      this.rows = this.sheetData;
    },
    determineTheme() {
      if (this.useDualTheme) {
        let now = new Date();
        if (now.getHours() > 19 || now.getHours() < 7) {
          this.theme = "night";
        } else {
          this.theme = "day";
        }
      }
    },
  },
};
</script>

<style scoped>
.day .sheet-row .label {
  color: #333;
}
</style>